<template>
    <div class="box">
        <header class="tou">
            <van-nav-bar title="我的订单" left-arrow @click-left="$router.go(-1)" />
        </header>
        <main class="zhong">
            <van-tabs v-model:active="active" @change="onChange">
                <van-tab title="全部"></van-tab>
                <van-tab title="待付款"></van-tab>
                <van-tab title="待发货"></van-tab>
                <van-tab title="待收货"></van-tab>
                <van-tab title="待评价"></van-tab>
                <van-tab title="售后"></van-tab>
            </van-tabs>
            <van-empty v-if="store.myOrderList.length==0" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
                description="还没有相关订单哦" />
            {{ store.myOrderList }}
            <van-swipe-cell  v-for="item in store.myOrderList" :key="item.id">
                <van-card :price="item.price" :title="item.title" :thumb="item.image" />
            </van-swipe-cell>
        </main>
    </div>
</template>
<script setup>
import { ref } from "vue";
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore()
const active = ref(0);
const list = ref([]);
const onChange = (index) => {
    console.log(index);
    if (index == 0) {
        list.value = store.myOrderList;
    }
    else {

    }
}
</script>